<template>
<!-- 7-6难点在于css样式，因为本人css太渣 -->
    <div>
        <div class="recommend-title">热销推荐</div>
        <ul class="recommend">
            <!-- 一像素边框的解决方案 -->
            <router-link class="item border-bottom" 
            v-for="item of list" 
            :key="item.id"
            tag="li"
            to="/detail"
            >
                <img class="item-img" :src="item.imgUrl" />
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-button">查看详情</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    name: "Homerecommend",
    props: {
        list: Array
    },
    data () {
        return {
        // //     recommendList: [{
        // //         id:"0001",
        // //         imgUrl:"https://imgs.qunarzz.com/tuan/team2/1507/2c/83e0e0e7ae082a.jpg_224x148_bae6119a.jpg",
        // //         title:"东方明珠",
        // //         desc:"感受云端漫步，品味老上海风情"
        // //     }
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    // 以下css样式是跟着视频打的。。
    .recommend-title
        margin-top: .1rem
        line-height: .8rem
        background: #eee
        text-indent: .2rem
    .item
        display: flex
        overflow: hidden
        height: 1.9rem
        // background: red
        .item-img
            width: 1.7rem
            height: 1.7rem
            padding: .1rem
        .item-info
            // 对于flex仍然是一知半解。。。所以不知道是否该加
            // flex: 1
            padding: .1rem
            // 加了这句下面的ellipsis才会生效
            min-width: 0
            .item-title
                line-height: .54rem
                font-size: .32rem
                ellipsis()
            .item-desc
                line-height: .4rem
                color: #ccc
                ellipsis()
            .item-button
                line-height:.44rem
                margin-top: .16rem
                background: #ff9300
                padding: 0 .1rem
                border-radius: .06rem
                color: #fff     


</style>

